<!-- 
  时间轴组件，展示一天内不同时间段的工作安排
  包含四个时间片段，每个片段都有详细的任务描述
-->
<template>
  <el-timeline class="timelog-timeline">
    <el-timeline-item v-for="item in list" :key="item.id" :timestamp="utils.formatDate(new Date(item.startTime), 'HH:mm') + ' - ' + utils.formatDate(new Date(item.endTime), 'HH:mm')" placement="top" class="timeline-item">
      <el-card>
        <div class="item-tt">
          <h4 class="project" v-if="item.timelogCategory === 0">{{ item.projectCode + ' - ' + item.projectName }}</h4>
          <h4 class="project" v-else>{{ getTitle(item.timelogCategory) }}</h4>
          <div class="btn-group">
            <el-button type="primary" v-if="false" :icon="Edit" @click="handleClickBtnEdit(item)" circle size="small" />
            <el-button type="danger" :icon="Delete" @click="handleClickBtnDelete(item)" circle size="small" />
          </div>
        </div>
        <div class="item-bd">{{ item.remark }}</div>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>
<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue'
import * as utils from '../../utils'
import IProjectTypes from '../../interface/IProjectTypes'

const props = defineProps({
  list: {
    type: Array<any>,
    required: true,
  },
  projectTypes: {
    type: Array<IProjectTypes>,
    required: true,
    default: () => [{ dictCode: 0 }],
  },
})

const emits = defineEmits(['delete', 'edit'])

const handleClickBtnDelete = (item: any) => {
  // console.log(item)
  emits('delete', item)
}

const handleClickBtnEdit = (item: any) => {
  console.log('edit', item)
  emits('edit', item)
}

const getTitle = (val: any) => {
  const item = props.projectTypes.find((e) => e.dictValue == val)

  return item?.dictLabel || ''
}
</script>
<style scoped lang="scss">
.timelog-timeline {
  width: 100%;
  .timeline-item {
    text-align: left;
    .item-tt {
      display: flex;
      .project {
        flex: 1;
      }
      .btn-group {
        opacity: 0;
      }
      & + .item-bd {
        margin-top: 15px;
      }
    }
    &:hover {
      .btn-group {
        opacity: 1;
      }
    }
  }
}
</style>
